<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>vue2生命周期</h2>
    </div>

    <script src="./lib/Vue2.js"></script>
    <script>
      // 如果没有出现在页面上渲染出来的变量，不要放在data里面
      let timer;

      new Vue({
        el: "#app",
        data: {},

        mounted() {
          timer = setInterval(() => {
            console.log(12345);
          }, 1000);

          setTimeout(() => {
            // 主动销毁
            this.$destroy();
          }, 4000);
        },

        // vue2的销毁的生命周期，在vue3改了名字，改成了beforeUnmount,unmounted
        beforeDestroy() {
          // 如果页面存在定时器，需要在销毁的时候将定时器清掉
          // Websocket长连接,后端可以向前端推送内容,断开长连接
          // addEventListener原生的js事件监听,removeEventListener
          // eCharts或者地图等第三方插件的时候,卸载实例以释放内存
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        destroyed() {
          // 一般不做事情
          console.log("destroyed");
        },
      });
    </script>
  </body>
  <html></html>
</html>
